<template>
	<div class="nav">
		<div class="container">
			<h1 class="logo"><a href="/index.html">{{userinfo.username}}</a></h1>
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				active-text-color="#c0392b" :router="true">
				<el-menu-item index="HomeView">首页</el-menu-item>
				<el-menu-item index="cateView">分类</el-menu-item>
				<el-submenu index="projectView">
					<template slot="title">项目</template>
					<el-menu-item v-for="(item,index) in projectData" :key="index" @click="seturl(item.projecturl)">
						{{item.projectname}}
					</el-menu-item>
				</el-submenu>
				<el-menu-item index="articleView">文章</el-menu-item>
				<el-menu-item index="blogarticleView">所有博客文章</el-menu-item>
				<el-submenu index="me">
					<template slot="title">关于</template>
					<el-menu-item index="AboutView">关于我</el-menu-item>
					<el-menu-item>退出登录</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				projectData: [],
			}
		},
		props: {
			activeIndex: String,
		},
		computed: {
			...mapState(['userinfo'])
		},
		created() {
			this.getprojectData();
		},
		methods: {
			handleSelect(key, keyPath) {
				// console.log(key, keyPath);
				if (keyPath[0] == 'me' && keyPath[1] == null) {
					this.open();
				}
			},
			open() {
				this.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
					confirmButtonText: '继续',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					localStorage.removeItem("userinfo");
					this.$router.push("/LoginView");
					this.$message({
						type: 'success',
						message: '退出成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			},
			async getprojectData() {
				// if (this.activeIndex == 'HomeView') {
					let {
						data
					} = await this.$axios.get('/blog/users/userproject?userid=' + this.userinfo.id);
					this.projectData = data.data.List;
				// }
			},
			seturl(projecturl) {
				window.open(projecturl);
			}
		}
	}
</script>

<style lang="less" scoped>
	.nav {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		transition: all 0.3s ease-in-out;
		background: #fff;
		box-shadow: 0 8px 5px -5px #fff;
		z-index: 999;

		.container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 20px 0;
			max-width: 1200px;
			margin: 0 auto;
		}

		ul {
			display: flex;
			list-style: none;
			align-items: center;
			justify-content: center;
			border-bottom: none;
		}

		a {
			color: #000;
			text-decoration: none;
			padding: 7px 15px;
			transition: all 0.3s ease-in-out;
		}

		a.current,
		a:hover {
			color: #c0392b;
			font-weight: bold;
		}

		.is-active {
			font-weight: bold !important;
		}

		.el-menu-item {
			font-size: inherit !important;
		}
	}
</style>
